import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon
import '@/permission' // permission control

// 导入font-awesome的字体图标，官网提示的是 link的方式导入的，我们这里开发项目采用的是 es模块化规范的
import 'font-awesome/css/font-awesome.min.css'
// 导入阿里矢量图标库的样式
import '@/styles/iconfont.css'

// set ElementUI lang to EN
Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)

Vue.config.productionTip = false

// 注册全局指令
Vue.directive('permission', {
  // 指令的生命周期函数   我只记得bind inserted update， 钩子函数：在特定的时机自动执行的函数
  // 每个钩子函数里面都有4个参数， 常用的就前两个 el当前绑定的dom元素，binding 指令后面传递参数，是一个对象
  inserted(el, binding) {
    const arr = store.state.user.userInfo?.roles?.points || []
    console.log('指令权限数组:', arr)
    if (!arr.includes(binding.value)) {
      // 如果当前指令在数组里面不存在，证明没有权限，那我们就再页面删除该元素
      el.remove()
    }
  }
})

// Vue.directive('myhide', {
//   // 指令的生命周期函数   我只记得bind inserted update， 钩子函数：在特定的时机自动执行的函数
//   // 每个钩子函数里面都有4个参数， 常用的就前两个 el当前绑定的dom元素，binding 指令后面传递参数，是一个对象
//   inserted(el, binding) {
//     const arr = store.state.user.userInfo?.roles?.xxxxx || []
//     console.log('指令权限数组:', arr)
//     if (!arr.includes(binding.value)) {
//       // 如果当前指令在数组里面不存在，证明没有权限，那我们就再页面删除该元素
//       el.remove()
//     }
//   }
// })

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

// 看一看当前项目的环境，是开发环境，还是生产
// npm run dev 启动项目，查看浏览器的打印--- 这个是开发环境
// npm run preview 启动项目，这个命令是这个仓库的作者帮我写的一个本地预览的服务器，将代码先打包(内部也是会执行npmr run build 将各种文件压缩合并，之前我们只开一个新的vscode 通过 live server 启动一个服务器，端口 5500)
// console.log(process.env)

// console.log(process.env.VUE_APP_HEIMA_NAME)
